<html>
<head>
  <title>Hello HTML5::Canvas world</title>
  <script type="text/xaml" id="xaml"><?xml version="1.0"?>
        <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
  <script type="text/javascript" src="../uupaa-excanvas.js"></script>
  <script type="text/javascript">
  window.onload = function() {
    uuCanvas.ready(function() {
      var ctx = document.getElementById("canvas").getContext("2d");
      ctx.textBaseline = "top";
      ctx.font = "32pt Arial";
      ctx.fillStyle = "black";
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
      ctx.shadowColor = "gray";
      ctx.shadowBlur = 5;
      ctx.fillText("YES", 0, 0);
      ctx.fillText("WE", 0, 40);
      ctx.fillText("CANVAS!", 0, 80);
    });
  }
  </script>
  <style type="text/css">
    body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
    h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
    h2 { font-size: 100%; color: #036; }
    pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
  </style>
</head>
<body>
    <h1>A <code>hello world</code> example</h1>
    <div>
      <canvas id="canvas" width="500" height="200"></canvas>
      <pre>
  window.onload = function() {
    uuCanvas.ready(function() {
      var ctx = document.getElementById("canvas").getContext("2d");
      ctx.textBaseline = "top";
      ctx.font = "32pt Arial";
      ctx.fillStyle = "black";
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
      ctx.shadowColor = "gray";
      ctx.shadowBlur = 5;
      ctx.fillText("YES", 0, 0);
      ctx.fillText("WE", 0, 40);
      ctx.fillText("CANVAS!", 0, 80);
    });
  }
      </pre>
    </div>
</body>
</html>
